<template>
    <el-card :header="title">

        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
            status-icon>

            <el-row :gutter="10">
                <el-col :md="14" :sm="10" :xs="12">
                    <el-form-item label="城市名" prop="cityName">
                        <el-input size="large" v-model="ruleForm.cityName" />
                    </el-form-item>
                </el-col>
                <el-col :sm="10" :md="6" :xs="10">
                    <el-button @click="handleConfirm" size="large" type="primary">
                        发布
                    </el-button>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :md="14" :xs="18">
                    <el-form-item label="摘要" prop="summary">
                        <el-input :autosize="{ minRows: 4, maxRows: 6 }" v-model="ruleForm.summary" type="textarea" />
                    </el-form-item>
                </el-col>
                <el-col :md="10" :xs="18">
                    <el-form-item label="状态" prop="status">
                        <el-radio-group size="large" v-model="ruleForm.status">
                            <el-radio :value="0" size="large" border>正常</el-radio>
                            <el-radio :value="1" size="large" border>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="图片">
                <el-upload ref="uploadRef" v-model:file-list="fileList" list-type="picture-card" :auto-upload="false">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <MdEditor :disabled-menus="[]" @onUploadImg="handleUploadImage" v-model="ruleForm.content">
                </MdEditor>
            </el-form-item>

        </el-form>
    </el-card>
</template>


<script setup>
import { reactive, ref, computed } from 'vue';
import { MdEditor } from 'md-editor-v3';
import { ElMessage } from 'element-plus'
import { useCityStore } from '@/store/city/index.js'
import { UploadImgAPI, addCityAPI, updateCityAPI } from '@/api'
import { useRouter } from 'vue-router'

const $router = useRouter()
import 'md-editor-v3/lib/style.css';

const originalcityData = () => ({
    id: '',
    cityName: '',
    content: '',
    thumbnail: '',
    status: 0,
    summary: '',
})

const uploadRef = ref()
const fileList = ref([])
let ruleForm = reactive(originalcityData())

const title = computed(() => {
    return useCityStore().getTitle
})

const initValue = () => {
    ruleForm = useCityStore().cityListValue
    if (useCityStore().id != -1) {
        let img = []
        let obj = {}
        obj.url = ruleForm.thumbnail
        img.push(obj)
        fileList.value = img
    }
}

initValue()

const rules = reactive({
    cityName: [
        { required: true, message: 'Please input ', trigger: 'blur' },
    ],
})

const handleUploadImage = async (files, callback) => {
    const res = await Promise.all(
        files.map((file) => {
            return new Promise((rev, rej) => {
                const form = new FormData();
                form.append('file', file);

                UploadImgAPI(form)
                    .then((res) => rev(res))
                    .catch((error) => rej(error));
            });
        })
    );

    callback(res.map((item) => item));
}

const handleConfirm = async () => {
    const formData = new FormData()
    if (fileList.value[0].raw) {
        formData.append("file", fileList.value[0].raw)
        const res = await UploadImgAPI(formData)
        ruleForm.thumbnail = res
    }
    let rus = ref()
    if (useCityStore().id == -1) {
        rus.value = await addCityAPI(ruleForm)

    }
    else {
        rus.value = await updateCityAPI(ruleForm)

    }
    if (rus.value != false) {
        if (useCityStore().id == -1) {
            ElMessage.success("添加成功")
        }
        else {
            ElMessage.success("更新成功")
        }
        Object.assign(ruleForm, originalcityData())
        uploadRef.value.clearFiles()
        useCityStore().reset()
        $router.push({
            path: "/system/cityList"
        })
    }
}


</script>


<style lang="scss" scoped></style>